<template>
  <view class="work-order-item">
    <view class="card">
      <!-- 卡片头部 -->
      <view class="card-header">
        <text class="order-title">{{ workOrder?.title || '-' }}</text>
        <view class="status-tag" :class="getStatusClass(workOrder?.status)">
          <text>{{ getStatusText(workOrder?.status) }}</text>
        </view>
      </view>
      
      <!-- 卡片内容 -->
      <view class="card-content">
        <view class="info-row">
          <text class="label">工单类型：</text>
          <text class="value">{{ getOrderTypeText(workOrder?.type) }}</text>
        </view>
        <view class="info-row">
          <text class="label">指派给：</text>
          <text class="value">{{ workOrder?.assigneeName || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="label">创建时间：</text>
          <text class="value">{{ workOrder?.createTime || '-' }}</text>
        </view>
        <view class="info-row" v-if="workOrder?.updateTime">
          <text class="label">更新时间：</text>
          <text class="value">{{ workOrder?.updateTime }}</text>
        </view>
        <view class="info-row" v-if="workOrder?.priority">
          <text class="label">优先级：</text>
          <text class="value priority" :class="getPriorityClass(workOrder?.priority)">{{ getPriorityText(workOrder?.priority) }}</text>
        </view>
        <view class="info-row" v-if="workOrder?.description">
          <text class="label">描述：</text>
          <text class="value description">{{ workOrder?.description }}</text>
        </view>
      </view>
      
      <!-- 卡片底部操作 -->
      <view class="card-footer">
        <view class="action-buttons">
          <up-button type="info" size="small" @click="handleView">查看详情</up-button>
          <up-button type="primary" size="small" @click="handleTrack">跟踪进度</up-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

// 定义props
const props = defineProps({
  workOrder: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['view', 'track'])

// 处理查看详情
const handleView = () => {
  emit('view', props.workOrder)
}

// 处理跟踪进度
const handleTrack = () => {
  emit('track', props.workOrder)
}

// 获取状态样式类
const getStatusClass = (status) => {
  const statusMap = {
    pending: 'status-pending',
    processing: 'status-processing',
    completed: 'status-completed',
    cancelled: 'status-cancelled'
  }
  return statusMap[status] || 'status-pending'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    pending: '待处理',
    processing: '处理中',
    completed: '已完成',
    cancelled: '已取消'
  }
  return statusMap[status] || '待处理'
}

// 获取工单类型文本
const getOrderTypeText = (type) => {
  const typeMap = {
    maintenance: '设备维护',
    complaint: '投诉处理',
    inspection: '巡检任务',
    repair: '故障维修',
    other: '其他'
  }
  return typeMap[type] || '其他'
}

// 获取优先级样式类
const getPriorityClass = (priority) => {
  const priorityMap = {
    high: 'priority-high',
    medium: 'priority-medium',
    low: 'priority-low'
  }
  return priorityMap[priority] || 'priority-medium'
}

// 获取优先级文本
const getPriorityText = (priority) => {
  const priorityMap = {
    high: '高',
    medium: '中',
    low: '低'
  }
  return priorityMap[priority] || '中'
}
</script>

<style lang="scss" scoped>
.work-order-item {
  margin-bottom: 20rpx;
}

.card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .order-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    flex: 1;
    margin-right: 20rpx;
  }
  
  .status-tag {
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
    
    &.status-pending {
      background: #fff7e6;
      color: #fa8c16;
    }
    
    &.status-processing {
      background: #e6f7ff;
      color: #1890ff;
    }
    
    &.status-completed {
      background: #f6ffed;
      color: #52c41a;
    }
    
    &.status-cancelled {
      background: #fff2f0;
      color: #ff4d4f;
    }
  }
}

.card-content {
  .info-row {
    display: flex;
    margin-bottom: 16rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .label {
      font-size: 28rpx;
      color: #666;
      width: 160rpx;
      flex-shrink: 0;
    }
    
    .value {
      font-size: 28rpx;
      color: #333;
      flex: 1;
      
      &.priority {
        font-weight: 600;
        
        &.priority-high {
          color: #ff4d4f;
        }
        
        &.priority-medium {
          color: #fa8c16;
        }
        
        &.priority-low {
          color: #52c41a;
        }
      }
      
      &.description {
        line-height: 1.5;
        word-break: break-all;
      }
    }
  }
}

.card-footer {
  margin-top: 24rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
  
  .action-buttons {
    display: flex;
    gap: 16rpx;
    justify-content: flex-end;
  }
}
</style>